<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        ul {
            list-style: none;
        }
        #box {
            width: 1000px;
            border: 1px #ccc solid;
            margin: 100px auto;
            padding: 20px;
        }
        #comment {
            width: 80%;
            padding: 10px 10px;
            font-size: 20px;

        }
        #box_top {
            margin-top: 20px;
        }
        li {
            border-bottom: 1px dashed #ccc;
            width: 800px;
            color: red;
            line-height: 45px;
        }
        a {
            float: right;
           /* padding-right: 50px; */
        }
    </style>
</head>
<body>
    <div id="box">
        <div class="box_top">
            <textarea name="" id="comment" cols="80" rows="10" placeholder="请输入您的评论："></textarea>
            <button id="btn">发布</button>
        </div>
        <ul id="comment_content">
            <li><a href="javascript:void(0);"></a></li>
            
        </ul>
    </div>
    <script>
        window.onload=function(){
            //监听按钮的点击
            $('btn').onclick=function(){
                var content=$('comment').value;
                if (content.length===0){
                    alert('请输入您的评论');
                    return;
                }
                var newLi=document.createElement('li');
                newLi.innerHTML=`${content}<a href="javascript:void(0);">删除</a>`;
                // $('comment_content').appendChild(newLi);
                //在之前插入内容
                $('comment_content').insertBefore(newLi,$('comment_content').children[0]);
                //清空输入框
                $('comment').value='';
                //删除评论
                var del=document.getElementsByTagName('a');
                for(var i=0;i<del.length;i++){
                    del[i].onclick=function(){
                        this.parentNode.remove();
                    }
                }
            }
        }
        function $(id){
                    return typeof id==='string'?document.getElementById(id):null;
         }
    </script>
</body>
</html>